<template>
	<view class="">
		<van-field
		  v-model="pickerValue"
		  readonly
		  name="time"
		  label="时间:"
		  placeholder="点击选择时间"
		>
			<template #input>
				<ifun-date-picker 
					type="year-month" 
					:value="pickerValue" 
					:gap="[[2015],[2055]]" 
					@ok="onConfirm"
					@cancel="onCancel">
				</ifun-date-picker>
			</template>
		</van-field>
		<view class="content">
			<uni-table border stripe emptyText="暂无更多数据" >
				<!-- 表头行 -->
				<uni-tr>
					<uni-th align="center" width="150">日期</uni-th>
					<uni-th align="left" width="150" v-for="item in formClom" :key="item.label">{{item.label}}</uni-th>
					<uni-th align="center" width="150">操作</uni-th>
				</uni-tr>
				<!-- 表格数据行 -->
				<uni-tr v-for="(item, index) in tableData" :key="item.time" >
					<uni-td>{{ item.time }}</uni-td>
					<uni-td  v-for="items in formClom" :key="items.label" >{{ item[items.key] }}</uni-td>
					<uni-td>
						<van-button size="small" style="margin-right: 15px;" type="primary" @click="onEdit(item.time)">
						  编辑
						</van-button>
						<van-button size="small" type="danger" @click="onDelete(item.time)">
						  删除
						</van-button>
					</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td>总记</uni-td>
					<uni-td  v-for="items in formClom" :key="items.label" >{{numAllTotal(items.key)}}</uni-td>
					<uni-td></uni-td>
				</uni-tr>
			</uni-table>
		</view>
		<up-toast ref="uToastRef"></up-toast>
	</view>
</template>

<script setup>
import { computed, reactive, ref } from 'vue'
import { formClom } from '@/utils/config.js'
import { getLocalData, precisionCalc, delLocalData } from '@/utils/util.js'
import dayjs from 'dayjs'
// #ifdef APP || APP-ANDROID
// 组件丢失问题处理
import UpToast from '@/uni_modules/uview-plus/components/u-toast/u-toast.vue'
// #endif
	
const pickerValue = ref(dayjs(new Date()).format('YYYY-MM'))
const uToastRef = ref(null) 
const tableData = ref([]) 

const getData = (time) => {
	const data = getLocalData( time, 'month' )
	if(data && data.children){
		tableData.value = data.children.sort((a,b)=> a.time.split('-')[2] - b.time.split('-')[2])
	}else {
		tableData.value = []
	}
}

const onConfirm = (value)=>{
	if(typeof value !== 'string') return
	getData(value + '-01')
	pickerValue.value = value
}
const onCancel = ()=> {}

const onEdit = (time) => {
	console.log(time);
	uni.navigateTo({
		url: `/pages/edit/index?time=${time}`
	})
}

const onDelete = (time) => {
	console.log(time);
	delLocalData(time).then(res=>{
		uToastRef.value.show({
			type: "success",
			title: "删除成功",
			message: res
		})
		getData(pickerValue.value + '-01')
	}).catch(err=> {
		uToastRef.value.show({
			type: "error",
			title: "删除失败",
			duration: 2000,
			message: err
		})
	})
}

uni.$on('update',function(data){
	getData(data.time)
})

const numAllTotal = computed(()=>{
	return (key) => {
		function calculateSum(array) {
		  return array.reduce((accumulator, currentValue) => precisionCalc(accumulator,currentValue, "+"), 0);
		}
		return calculateSum(tableData.value.map(item => item[key]))
	}
})
getData(pickerValue.value + '-01')
</script>

<style scoped>
/deep/.picker-label {
	color: #3c9cff !important;
}
</style>